<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
					</view>

				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../static/img/mine/yq-bg(1).png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>

			<view class="m-d">
				<view class="toptext font_14_FFF flex flex_cen">
					邀请成功即可获得 <span class="jfnum">100</span> 积分奖励
				</view>
				<view class="tjyl flex flex_cen">
					推荐有礼
				</view>
			</view>
		</view>
		<view class="ewm-div">
			<image class="ewm-img" show-menu-by-longpress :src="codeimg" mode=""></image>
			<button open-type="share" style="background-color: rgba(0, 0, 0, 0);">
				<view class="flex x-btn flex_cen">
					<image class="szt-img" src="../../static/img/home/c4.png" mode=""></image>
					<view class="xiadan">
						立即推荐给好友
					</view>
				</view>
			</button>
			
		</view>
		<view class="u-p-b-40">
			<view class="u-m-t-32 u-m-l-32 flex">
				<view class="sx"></view>
				<view class="font_16_333 font_weight u-m-l-10">
					佣金规则
				</view>
			</view>
			<view class="u-m-t-32 yjtext">
				<rich-text :nodes="richText"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatRichText
	} from '@/static/richText.js'
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#FE3954'],
					slideBackgroundColor: [1, '#FE3954']
				},
				userid:'',
				codeimg: '',
				richText: '',
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onShareAppMessage(res) {
			return {
				imageUrl: this.codeimg,
				title: '律动引擎',
				path: "/pages/index/index?user_id=" + this.userid + '&share=true',
			}
		},
		onLoad() {
			this.getDetail()
			this.qrcode()
		},
		methods: {
			
			getDetail() {
				this.$api({
					url: '/getPage',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						id: 45
					},
				}).then(res => {
					if (res.code == 1) {
						this.richText = formatRichText(res.data.content)
					}
				})
				
				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						
						this.userid = res.data.id
					}
				})
			},
			qrcode() {
				this.$api({
					url: '/user/qrcode',
					method: 'get',
					data: {
						token: uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.codeimg = res.data

					}
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	page {
		background: #FFD6B6;
	}
</style>
<style scoped lang="scss">
	.sx {
		width: 8rpx;
		height: 24rpx;
		background: #FB7F46;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.yjtext {
		width: 686rpx;
		padding: 24rpx 32rpx;
		background: #FFF7EA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FCF4E9;
		font-size: 24rpx;
		color: #333333;
		line-height: 48rpx;
		margin: 0 auto;
	}

	.ewm-div {
		width: 686rpx;
		height: 620rpx;
		background: #FFF7EA;
		border-radius: 0rpx 0rpx 32rpx 32rpx;
		border: 2rpx solid #FFDBA9;
		margin: 0 auto;
		border-top-style: none;
		padding-top: 32rpx;

		.ewm-img {
			width: 408rpx;
			height: 408rpx;
			margin: 0 auto;

		}

		.x-btn {
			width: 556rpx;
			height: 88rpx;
			background: linear-gradient(177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			position: relative;
			font-weight: bold;
			font-size: 36rpx;
			color: #773E00;
			margin: 0 auto;
			margin-top: 32rpx;

			.szt-img {
				position: absolute;
				right: 66rpx;
				top: 24rpx;
				width: 72rpx;
				height: 64rpx;
			}
		}
	}

	.nav_wrap {
		position: relative;
		width: 100vw;
		height: 88rpx;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}

	.main-div {
		position: relative;
		width: 100%;
		height: 944rpx;
		display: flex;
		flex-direction: column;

		.main-bg {
			width: 100%;
			height: 944rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.zhanwei {
			width: 100%;
		}

		.m-d {
			width: 100%;
			// height: 944rpx;
			position: relative;
			z-index: 2;
			flex: 1;
			/* 这会使子元素填满剩余空间 */

			.toptext {
				position: absolute;
				bottom: 540rpx;
				width: 100%;

				.jfnum {
					font-weight: bold;
					font-size: 40rpx;
					color: #FFF28E;
				}
			}

			.tjyl {
				position: absolute;
				bottom: 20rpx;
				width: 100%;
				font-weight: bold;
				font-size: 40rpx;
				color: #EF5726;
			}
		}
	}
</style>